<template>
<div>
  <h1>展示班级</h1>
  <table border="1" cellspacing="0" align="center">
    <tr>
      <td>班级名称</td>
      <td>班级说明</td>
      <td>所在校区</td>
    </tr>
    <tr v-for="i in classlist">
      <td>{{i.name}}</td>
      <td>{{i.state}}</td>
      <td>{{i.school.name}}</td>
    </tr>
  </table>
  <h1>添加班级</h1>
  <p>班级名称:<input type="text" v-model="form.name"></p>
  <p>班级说明:<input type="text" v-model="form.state"></p>
  <p>
    <select name="" id="" v-model="form.school">
    <option :value="i.id" v-for="i in schoollist">{{i.name}}</option>
    </select>
  </p>
  <button @click="add">添加</button>

</div>
</template>

<script>
export default {
name: "school_class",
  data(){
  return{
    form:{},
    classlist:{},
    schoollist:{},
  }
  },
  methods:{
    add(){
      this.$axios.post('users/xclassm/',this.form)
      .then(res=>{
        console.log(res.data)
      })
    },
    get_classlist(){
      this.$axios.get('users/xclassm/')
        .then(res=>{
          this.classlist=res.data.list
        })
    },
    get_schoollist(){
      this.$axios.get('users/schoolm/')
        .then(res=>{
          this.schoollist=res.data.list
        })
    },
  },
  mounted() {
    this.get_schoollist()
    this.get_classlist()
  }
}
</script>

<style scoped>

</style>
